<template>
  <div>
    <div v-for="(item, index) in followsBrUserinfo">
      <el-avatar shape="square" :size="100" :src="item.avatar"></el-avatar>
      {{ item.userName }}
      <el-button @click="cancelFollow(item.id, item.followId)">取消关注</el-button>
    </div>
  </div>
</template>

<script>
import { delFollow, listFollow } from '@/api/follow'
import { getInfoById } from '@/api/login'
import { followBehavior } from '@/api/video'

export default {
  data () {
    return {
      follows: [],
      followsBrUserinfo: []
    }
  },
  methods: {
    async cancelFollow (id, followId) {
      await delFollow(id)
      await followBehavior({
        operation: false,
        SysFollow: {
          userId: JSON.parse(localStorage.getItem('user')).userId,
          followId: followId
        }
      })
      this.followsBrUserinfo = this.followsBrUserinfo.filter(item => item.id !== id)
    }
  },
  async created () {
    const res = await listFollow()
    this.follows = res.data.rows

    for (const follow of this.follows) {
      let userInfo = await getInfoById(follow.userId)
      userInfo = userInfo.data.data
      this.followsBrUserinfo.push({
        ...userInfo,
        followId: follow.followId,
        id: follow.id
      })
    }
  }
}
</script>

<style scoped lang="less">

</style>
